﻿<UserControl x:Class="myCollections.UserControls.Common.ucArtistView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:panel="clr-namespace:myCollections.Controls"
             xmlns:common="clr-namespace:myCollections.UserControls.Common"
             xmlns:effects="clr-namespace:myCollections.Controls.CustomEffects"
             xmlns:converters="clr-namespace:myCollections.Utils"
             mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.InputBindings>
        <KeyBinding Command="common:Commands.EditItem" Gesture="CTRL+E"></KeyBinding>
        <KeyBinding Command="common:Commands.DeleteItem" Gesture="CTRL+D"></KeyBinding>
    </UserControl.InputBindings>
    <UserControl.CommandBindings>
        <CommandBinding Command="common:Commands.EditItem"  Executed="OnEdit" />
        <CommandBinding Command="common:Commands.DeleteItem"  Executed="OnDelete"  />
    </UserControl.CommandBindings>
    <UserControl.Resources>
        <converters:ByteArrayToBitmapImageConverter x:Key="byteArrayToBitmapImageConverter" />
        <converters:ImageWidthConverter x:Key="imageWidthConverter"/>
        <converters:CardWidthConverter x:Key="cardWidthConverter"/>
        <converters:CardHeightConverter x:Key="cardHeightConverter"/>
        <DataTemplate x:Key="ArtistTemplate">
            <Control>
                <Control.Template>
                    <ControlTemplate>
                        <Border Padding="7" 
                                Height="200"
                                Width="400"
                                Background="{DynamicResource BorderColor}" 
                                CornerRadius="10" BorderThickness="1" x:Name="bd" Margin="4" Focusable="False">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>

                                <Image Grid.Column="0" Grid.Row="0"
                                      Height="180"
                                      Source="{Binding Path=Cover, Converter={StaticResource byteArrayToBitmapImageConverter}}" 
                                        />

                                <Grid Grid.Column="1" Grid.Row="0">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="20" />
                                        <RowDefinition Height="15" />
                                        <RowDefinition Height="20" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>

                                    <TextBlock Margin="0,2" ToolTip="{Binding Path=Name}" Text="{Binding Path=Name}" 
                                               FontSize="12" FontWeight="Bold" TextWrapping="WrapWithOverflow" 
                                               TextTrimming="WordEllipsis" Grid.Row="0"/>
                                    
                                    <TextBlock  Text="{Binding Path=Aka}" 
                                                FontFamily="Segoe UI" TextOptions.TextFormattingMode="Display" 
                                                TextOptions.TextRenderingMode="ClearType" Grid.Row="1" />

                                    <TextBlock Text="{Binding Path=ReleaseDate,StringFormat={}{0:d}}" 
                                                   FontFamily="Segoe UI" TextOptions.TextFormattingMode="Display" 
                                                   TextOptions.TextRenderingMode="ClearType" Grid.Row="2" />

                                    <TextBlock  Text="{Binding Path=Description}" 
                                                FontFamily="Segoe UI" TextOptions.TextFormattingMode="Display" 
                                                TextOptions.TextRenderingMode="ClearType" 
                                                TextWrapping="Wrap" TextTrimming="WordEllipsis" Grid.Row="3" />

                                    <StackPanel Grid.Column="0" Grid.Row="4" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Bottom" >
                                        <Button x:Name="btnDelete" Visibility="Hidden"  ToolTip="Click to delete" Margin="3" 
                                                CommandParameter="{Binding}" Command="common:Commands.DeleteItem"
                                                Height="25">
                                            <Button.Template>
                                                <ControlTemplate>
                                                    <Border Padding="3" CornerRadius="6" Background="LightGray" BorderBrush="Black" BorderThickness="1">
                                                        <Image Source="/myCollections;component/Images/delete2.png" >
                                                            <Image.Effect>
                                                                <effects:GreyscaleEffect />
                                                            </Image.Effect>
                                                        </Image>
                                                    </Border>
                                                </ControlTemplate>
                                            </Button.Template>
                                        </Button>
                                        <Button  x:Name="btnEdit" Visibility="Hidden"  ToolTip="Click to edit" Margin="3" 
                                                 CommandParameter="{Binding}" Command="common:Commands.EditItem"
                                                 Height="25">
                                            <Button.Template>
                                                <ControlTemplate>
                                                    <Border Padding="3" CornerRadius="6" Background="LightGray" BorderBrush="Black" BorderThickness="1">
                                                        <Image Source="/myCollections;component/Images/edit.png" >
                                                            <Image.Effect>
                                                                <effects:GreyscaleEffect />
                                                            </Image.Effect>
                                                        </Image>
                                                    </Border>
                                                </ControlTemplate>
                                            </Button.Template>
                                        </Button>
                                    </StackPanel>
                                </Grid>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="bd" Property="Background" Value="{DynamicResource MouseOverColor}" />
                                <Setter TargetName="bd" Property="BorderBrush" Value="Black" />
                                <Setter TargetName="btnEdit" Property="Visibility" Value="Visible" />
                                <Setter TargetName="btnDelete" Property="Visibility" Value="Visible" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Control.Template>
            </Control>
        </DataTemplate>
    </UserControl.Resources>
    <ListBox  Name="MainStack" KeyboardNavigation.TabNavigation="Cycle"
                MouseDoubleClick="MainStack_MouseDoubleClick"
                Background="{x:Null}" BorderBrush="{x:Null}" FocusVisualStyle="{x:Null}" 
                Margin="5,0,0,0" SelectionMode="Extended" 
                ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                ScrollViewer.VerticalScrollBarVisibility="Auto"
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
                ItemTemplate="{StaticResource ArtistTemplate}" 
                ItemsSource="{Binding}" ItemContainerStyle="{DynamicResource ListBoxItemStyle1}">
        <ListBox.Resources>
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="DarkGray" />
            <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="DarkGray" />
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
            <Style x:Key="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}">
                <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="Padding" Value="2,0,0,0"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                            <Border Margin="6" CornerRadius="6" x:Name="Bd" BorderBrush="{x:Null}" BorderThickness="0" Background="{TemplateBinding Background}" Padding="0" SnapsToDevicePixels="true">
                                <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="true">
                                    <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                                </Trigger>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsSelected" Value="true"/>
                                        <Condition Property="Selector.IsSelectionActive" Value="false"/>
                                    </MultiTrigger.Conditions>
                                    <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                                </MultiTrigger>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListBox.Resources>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <panel:VirtualizingWrapPanel IsItemsHost="True"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    </ListBox>

</UserControl>
